<template>
  <div class='celebrity list'>
    <ul class="bc-gray">
      <li v-for="(item,index) in listData" :key="index" class="bc-white pr clearB active" @click="showDetail(item,index)">
        <div class="fl pr">
          <img :src="pic" alt="">
        </div>
        <div class="content">
          <p class="name">{{item.title}}</p>
          <p>内容：{{item.content}}</p>
          <p>添加时间：{{item.addtime}}</p>
          <Detail class="more-info clearB" :info="item" />
        </div>
        <p class="arrow"><img :src="item.isShow?arrow_top:arrow_bottom" alt=""></p>
      </li>
    </ul>
    <p class="no-data" v-show="listData.length==0">暂时没有数据</p>
  </div>
</template>
<script>
import Detail from './detail.vue'
export default {
  props:['listData','routerDetail'],
  components: {Detail},
  name: "",
  data() {
    return {
      pic:require('../../../../../assets/images/home/file.png'),
      arrow_top:require('../../../../../assets/images/home/arrow-top.png'),
      arrow_bottom:require('../../../../../assets/images/home/arrow-bottom.png'),
    };
  },
  methods: {
    showDetail(item,index){
      this.$set(item,'isShow',!item.isShow)
      item.isShow?$('.more-info').eq(index).slideDown():$('.more-info').eq(index).slideUp()
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
@import "../../../jobServe/workstudy/model/list.scss";
.celebrity {
  li{
    padding: 20px;
    margin-top: 20px;

    img{
      width: 150px;
    }
    .content{
      margin-left: 170px;
      min-height: 65px;
      font-size: 13px;
      color: #333;
      
      .name{
        color: #000;
        font-size: 15px
      }
      p{
        color: #666;
        line-height: 40px;
      }
    }
  }
}
.more-info{
  box-sizing: border-box;
}
</style>